<script setup lang="ts">
import type { GridItem } from '../index'

interface Props {
  grids: GridItem[]
  loading?: boolean
}

defineProps<Props>()

const emit = defineEmits<{
  click: [item: GridItem]
}>()

function handleGridClick(item: GridItem) {
  emit('click', item)
}
</script>

<template>
  <view class="px-4 py-3">
    <!-- 调试信息 -->
    <view v-if="false" class="mb-4 rounded bg-gray-100 p-2 text-xs">
      <text>加载状态: {{ loading }}</text>
      <text>菜单数量: {{ grids.length }}</text>
    </view>

    <!-- 加载状态 -->
    <view v-if="loading" class="grid grid-cols-4 gap-2">
      <view
        v-for="i in 8"
        :key="i"
        class="flex flex-col animate-pulse items-center rounded-xl bg-white p-3 shadow-sm"
      >
        <view class="mb-2 h-12 w-12 rounded-full bg-gray-200" />
        <view class="h-3 w-12 rounded bg-gray-200" />
      </view>
    </view>

    <!-- 宫格菜单 -->
    <view v-else-if="grids.length > 0" class="grid grid-cols-4 gap-2">
      <view
        v-for="item in grids"
        :key="item.id"
        class="flex flex-col items-center rounded-xl bg-white p-2 shadow-sm transition-shadow hover:shadow-md"
        @click="handleGridClick(item)"
      >
        <view
          class="mb-2 h-14 w-14 flex items-center justify-center rounded-full"
          :class="[item.color]"
        >
          <view
            class="text-2xl text-white"
            :class="[item.icon]"
          />
        </view>
        <text class="text-center text-xs text-gray-700">{{ item.title }}</text>
      </view>
    </view>

    <!-- 空状态 -->
    <view v-else class="flex flex-col items-center justify-center py-8">
      <view class="i-carbon-warning mb-2 text-4xl text-gray-400" />
      <text class="text-sm text-gray-500">暂无菜单项</text>
    </view>
  </view>
</template>
